<template>
    <div>
        <baidu-map class="map" center="东莞" :zoom="12">
            <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
            <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true"
                :autoLocation="true"></bm-geolocation>
            <!-- 动态生成公司标记 -->
            <bm-marker v-for="company in filteredCompanies" :key="company.userId" 
                :position="{ lng: company.location.lng, lat: company.location.lat }" animation="BMAP_ANIMATION_BOUNCE"
                @click="infoWindowOpen(company.userId)">
                <bm-info-window :show="infoWindows[company.userId]" @close="infoWindowClose(company.userId)"
                    @open="infoWindowOpen(company.userId)">
                    <el-link type="warning" :underline="false" :href="`/front/${company.userId}`" >查看详情</el-link>
                    <div v-html="company.demandInfo"></div>
                </bm-info-window>
                <bm-label :content="company.companyName" :labelStyle="{ color: 'blue', fontSize: '20px' }"
                    :offset="{ width: -35, height: 30 }" />
            </bm-marker>
            <!-- 动态生成农场标记 -->
            <bm-marker v-for="farmer in filteredFarmers" :key="farmer.userId"
                :position="{ lng: farmer.location.lng, lat: farmer.location.lat }" animation="BMAP_ANIMATION_BOUNCE"
                @click="infoWindowOpen(farmer.userId)">
                <bm-info-window :show="infoWindows[farmer.userId]" @close="infoWindowClose(farmer.userId)"
                    @open="infoWindowOpen(farmer.userId)">
                    <el-link type="warning" :underline="false" :href="`/farmerFront/${farmer.userId}`" >查看详情</el-link>
                    <div v-html="farmer.productionInfo"></div>
                </bm-info-window>
                <bm-label :content="farmer.farmName" :labelStyle="{ color: 'green', fontSize: '20px' }"
                    :offset="{ width: -35, height: 30 }" />
            </bm-marker>
        </baidu-map>
    </div>
</template>

<script>
export default {
    data() {
        return {
            infoWindows: {},  // 记录每个标记的 infoWindow 状态
            companies: [],    // 存储公司数据
            farmers: []       // 存储农场数据
        }
    },
    computed: {
        filteredCompanies() {
            // 返回只包含 location 的公司
            return this.companies.filter(company => company.location);
        },
        filteredFarmers() {
            // 返回只包含 location 的农场
            return this.farmers.filter(farmer => farmer.location);
        }
    },
    methods: {
        infoWindowClose(id) {
            this.$set(this.infoWindows, id, false);
        },
        infoWindowOpen(id) {
            // 关闭所有 infoWindows
            Object.keys(this.infoWindows).forEach(key => {
                this.$set(this.infoWindows, key, false);
            });
            // 打开当前 infoWindow
            this.$set(this.infoWindows, id, true);
        },
        fetchData() {
            // 获取公司数据
            this.$axios.get('/company/list')
                .then(response => {
                    if (response.code === 200) {
                        this.companies = response.data.map(company => ({
                            ...company,
                            lng: company.location ? company.location.lng : null,
                            lat: company.location ? company.location.lat : null
                        }));
                        console.log("公司数据初始化")
                        // 初始化 infoWindows 状态
                        this.companies.forEach(company => {
                            this.$set(this.infoWindows, company.userId, true);
                        });
                    }
                })
                .catch(error => {
                    console.error("公司数据请求失败:", error);
                });

            // 获取农场数据
            this.$axios.get('/farmer/list')
                .then(response => {
                    if (response.code === 200) {
                        this.farmers = response.data.map(farmer => ({
                            ...farmer,
                            lng: farmer.location ? farmer.location.lng : null,
                            lat: farmer.location ? farmer.location.lat : null
                        }));
                        console.log("农场数据初始化")
                        // 初始化 infoWindows 状态
                        this.farmers.forEach(farmer => {
                            this.$set(this.infoWindows, farmer.userId, true);
                        });
                    }
                })
                .catch(error => {
                    console.error("农场数据请求失败:", error);
                });
        }
    },
    mounted() {
        this.fetchData();
    }
}
</script>

<style scoped>
.map {
    width: 100%;
    height: 900px;
    /* 设定一个固定高度 */
}
</style>
